<template>
  <!-- 角色管理 -->
  <div class="app-container">
    <comDialog :dialogVisible="dialogVisible" :title="title">
      <el-form ref="comDialogForm" :model="comDialogForm" label-width="80px">
        <el-form-item label="角色名称">
          <el-input
            v-model="comDialogForm.name"
            placeholder="请输入角色名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色定义">
          <el-input
            v-model="comDialogForm.orientation"
            placeholder="请输入角色定义"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch
            v-model="comDialogForm.status"
            active-value="0"
            inactive-value="1"
          >
          </el-switch>
        </el-form-item>

        <el-form-item>
          <el-button @click="clickDialogCancel()">取消</el-button>
          <el-button type="primary" @click="clickDialogSave()">保存</el-button>
        </el-form-item>
      </el-form>
    </comDialog>
    <!-- 表单 -->
    <comForm
      :config="comFormConfig"
      :list="comFormList"
      :modes="comFormMode"
    ></comForm>
    <!-- 新增 修改 -->
    <comMb8Button :config="comMb8Button" @handle="handle"></comMb8Button>
    <!-- 表格 -->
    <comTable
      class="comTable"
      :config="comTableConfig"
      :list="comTableList"
      :modes="comTableMode"
      :pagination="pagination"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @EventgetCurrent="eventgetCurrent"
      @handleStatusChange="handleStatusChange"
    >
      <el-table-column label="操作" align="left" width="180" #default="scope">
        <el-button
          type="primary"
          plain
          size="mini"
          v-hasPermi="['wss:systems:role:edit']"
          @click="handleTableCurrentChange('edit', scope)"
          >修改</el-button
        >
        <el-button
          type="danger"
          plain
          size="mini"
          v-hasPermi="['wss:systems:role:edit']"
          @click="handleTableCurrentChange('delete', scope)"
          >删除</el-button
        >
      </el-table-column>
    </comTable>
  </div>
</template>

<script>
import comTable from "@/wss/components/comTable.vue";
import comForm from "@/wss/components/comForm.vue";
import comMb8Button from "@/wss/components/comMb8Button.vue";
import comDialog from "@/wss/components/comDialog.vue";
import {
  getAddRole,
  getRoleList,
  getDeleteRole,
  getEditRole,
} from "@/wss/api/role";

export default {
  components: {
    comTable,
    comForm,
    comMb8Button,
    comDialog,
  },
  dicts: ["sys_normal_disable"],

  data() {
    return {
      // 操作类型 edit  delete
      handleType: "",

      //  ---------- 对话框 ----------
      dialogVisible: false,
      title: "新增角色",

      comDialogForm: {
        name: "",
        orientation: "",
        status: "0",
      },
      // ---------- 表格配置 ----------
      comTableList: [],
      comTableMode: [
        // {
        //   label: 'ID',
        //   mode: 'id',
        //   width: '60',
        // },
        // 是否多选？
        {
          type: "selection",
          width: "55",
        },
        {
          label: "编号",
          type: "index",
          width: "55",
        },
        // {
        //   label: "角色编号",
        //   mode: "idStr",
        //   width: "200",
        //   // showOverflowTooltip: true,
        // },
        {
          label: "角色名称",
          mode: "name",
          width: "120",
          showOverflowTooltip: true,
        },
        {
          label: "权限字符",
          mode: "roleKey",
        },
        {
          label: "角色定义",
          mode: "orientation",
        },
        {
          label: "状态",
          mode: "status",
          width: "100",
        },
        {
          label: "创建时间",
          mode: "createTime",
        },
      ],
      // 表格的配置（不针对行）
      comTableConfig: {
        loading: false,
        label: "操作",
        width: 180,
      },

      // ---------- 表单配置 ----------
      comFormList: {
        screen: "",
        law: "",
        classify: [
          {
            value: "111",
            label: "黄金糕",
          },
          {
            value: "112",
            label: "双皮奶",
          },
          {
            value: "113",
            label: "蚵仔煎",
          },
        ],
        screening: [
          {
            valueaa: "111",
            labelaa: "待编辑",
          },
          {
            valueaa: "112",
            labelaa: "审核中",
          },
          {
            valueaa: "113",
            labelaa: "法规库",
          },
        ],
      },
      comFormMode: [
        {
          label: "快速筛选",
          mode: "screening",
          placeholder: "请筛选",
          formType: "select",
          options: {
            value: "valueaa",
            label: "labelaa",
          },
        },
        {
          label: "筛选",
          mode: "screen",
          placeholder: "筛选条件",
          formType: "input",
        },
        {
          label: "法条",
          mode: "law",
          placeholder: "请输入法条",
        },
        {
          label: "分类",
          mode: "classify",
          placeholder: "全部分类",
          formType: "select",
          options: {
            value: "value",
            label: "label",
          },
        },
        // {
        //   label: '生效时间',
        //   formType: 'date',
        //   pickerType: 'date',
        //   rangeSeparator: '-',
        //   startPlaceholder: '开始日期1112',
        //   endPlaceholder: '结束日期',
        // },
        {
          label: "上架时间",
          formType: "datePicker",
          pickerType: "date",
          rangeSeparator: "-",
          startPlaceholder: "开始日期1112",
          endPlaceholder: "结束日期",
        },
      ],
      comFormConfig: {},

      // 增删改 按钮
      comMb8Button: [
        {
          label: "增加",
          type: "primary",
          icon: "el-icon-plus",
          vHasPermi: "wss:systems:role:add",
        },
        {
          label: "删除",
          type: "danger",
          icon: "el-icon-delete",
          vHasPermi: "wss:systems:role:delete",
        },
      ],

      // 查询参数--分页
      pagination: {
        isShowpagination: true,
        pageNum: 1, //第几页
        total: 0, // 总数
        pageSize: 10, //每页显示数
      },
    };
  },

  mounted() {
    this.getRoleListMet(this.pagination);
  },
  methods: {
    // 添加角色
    async getAddRoleMet(data) {
      let result = await getAddRole(data).then((res) => res);
      if (result.code == "200") {
        this.dialogVisible = false;

        this.$message({
          message: result.msg,
          type: "success",
        });
      }
      this.getRoleListMet(this.pagination);
      this.comDialogConfig.dialogVisible = false;
    },
    // 角色列表
    async getRoleListMet(pagination = null) {
      this.comTableConfig.loading = true;
      let result = await getRoleList(pagination).then((res) => res);
      if (result.code == "200") {
        this.comTableList = result.rows;
        this.pagination.total = result.total;
        this.comTableConfig.loading = false;
      } else {
        this.$message({
          message: result.msg,
          type: "error",
        });
      }
      this.comTableConfig.loading = false;
    },
    // 修改
    async getEditRoleMet(data) {
      console.log(data);
      let result = await getEditRole(data).then((res) => {
        console.log(res);
      });
      if (result.code == "200") {
        this.$message({
          message: result.msg,
          type: "success",
        });
      } else {
        this.$message({
          message: result.msg,
          type: "error",
        });
      }
    },
    // 删除角色
    getDeleteRoleMet(data) {
      getDeleteRole(data).then((response) => {
        if (response.code == "200") {
          console.log(response.msg);
        }
      });
    },

    // ------------------------------------------------------
    // 分页操作 S
    // pageSize 改变时会触发	每页条数
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getRoleListMet(this.pagination);
    },

    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.getRoleListMet(this.pagination);
    },
    // 分页操作 END

    // Table操作方法
    eventgetCurrent(row) {
      if (this.handleType == "edit") {
        //  修改
        this.comDialogForm = {
          id: row.idStr,
          name: row.name,
          orientation: row.orientation,
          status: row.status,
        };
        this.dialogVisible = true;
      }
      // 删除  //****** 先不处理--后端接口404
      if (this.handleType == "delete") {
        let Arr = [];
        Arr.push(row.idStr);
        console.log(Arr);
        this.getDeleteRoleMet(...Arr);
      }
    },

    // Table操作方法
    handleTableCurrentChange(type, data) {
      let Id = data.row.idStr;
      this.comDialogForm = data.row;

      this.handleType = type;
      if (type == "edit") {
        //  修改
        this.title = "编辑角色";
        this.dialogVisible = true;
      }
      // 删除  //****** 先不处理--后端接口404
      if (type == "delete") {
        this.getDeleteRoleMet(Id);
      }
    },

    // 状态更改
    handleStatusChange(row) {
      this.comDialogForm = {
        id: row.idStr,
        name: row.name,
        orientation: row.orientation,
        status: row.status,
      };
      this.getEditRoleMet(this.comDialogForm);
    },

    // 操作 修改 dialog
    handle(type) {
      console.log(type);
      this.comDialogForm = {
        name: "",
        orientation: "",
        status: "0",
      };
      // 新增
      if (type == "primary") {
        this.dialogVisible = true;
      }
    },
    // dialog 保存
    clickDialogSave() {
      this.handleType == "edit"
        ? this.getEditRoleMet(this.comDialogForm)
        : this.getAddRoleMet(this.comDialogForm);

      this.dialogVisible = false;
    },
    // 取消角色添加
    clickDialogCancel() {
      this.comDialogForm = {
        name: "",
        orientation: "",
        status: "0",
      };
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>